<template>
  <view class="commentitem">
    <view class="commentitem-header">
      <view class="header">
        <view class="header-avatar">
          <uv-avatar
            @click.stop="clickuserAvatar(data)"
            :src="data.userossAvatar"
            default-url="/static/defaultavatar.png"
            shape="square"
          ></uv-avatar>
        </view>
        <view class="header_right">
          <view class="top">
            <view class="username">
              <view class="username_item">
                {{ data.userName }}
              </view>
              <view class="vip">
                <view class="view"> V{{ data.userLevel }} </view>
              </view>
            </view>
            <view class="dianping">
              <uv-tags
                v-if="data.state === '待鉴定'"
                :text="$t('待鉴定')"
                size="mini"
                bgColor="#748ee2"
                borderColor="#748ee2"
                color="#ffffff"
              ></uv-tags>
              <uv-tags
                v-else-if="data.state === '待反馈'"
                :text="$t('待反馈')"
                size="mini"
                bgColor="#f9ae3d"
                borderColor="#f9ae3d"
                color="#ffffff"
              ></uv-tags>
              <uv-tags
                v-else-if="data.identifycommentstate === 3"
                :text="$t('已处理')"
                size="mini"
                bgColor="#6ea942"
                borderColor="#6ea942"
                color="#ffffff"
              ></uv-tags>
              <uv-tags
                v-else-if="isNumber(data.identifycommentstate)"
                :text="$t('已预警')"
                size="mini"
                bgColor="#FD754C"
                borderColor="#FD754C"
                color="#ffffff"
              ></uv-tags>

              <view class="dianping-type">
                <uv-icon
                  custom-prefix="custom-icon"
                  labelColor="#ffffff"
                  color="#F9934A"
                  :name="tiancai"
                  size="18"
                ></uv-icon>
              </view>
            </view>
          </view>
          <view class="top2">
            <view class="username">
              <uv-rate
                readonly
                gutter="1"
                active-color="#FD754C"
                allowHalf
                v-model="data.accurateScore"
              ></uv-rate>
              <view>{{ data.accurateScore }}{{ $t("星") }}</view>
            </view>
            <view class="dianping-type">{{
              dicttype.find((c) => c.value === data.type)?.label
            }}</view>
          </view>
        </view>
      </view>
      <view class="commentitem-header-line">
        <view class="commentitem-header-line-item">
          <view class="commentitem-header-line-item-title"> 消费时间： </view>
          <view class="commentitem-header-line-item-content">
            {{ dayjs(data.feedbackTime).format("YYYY-MM-DD HH:mm:ss") }}
          </view>
        </view>
        <view class="commentitem-header-line-item">
          <view class="commentitem-header-line-item-title"> 台桌号： </view>
          <view class="commentitem-header-line-item-content">
            {{
              data.tiancaicomment.length ? data.tiancaicomment[0].tableNum : ""
            }}
          </view>
        </view>
        <view class="commentitem-header-line-item">
          <view class="commentitem-header-line-item-title"> 消费金额： </view>
          <view class="commentitem-header-line-item-content">
            {{
              data.tiancaicomment.length
                ? data.tiancaicomment[0].tctotal_fee
                : ""
            }}
          </view>
        </view>
        <view class="commentitem-header-line-item">
          <view class="commentitem-header-line-item-title"> 实收金额： </view>
          <view class="commentitem-header-line-item-content">
            {{
              data.tiancaicomment.length ? data.tiancaicomment[0].tcFee : ""
            }}</view
          >
        </view>
        <view class="commentitem-header-line-item">
          <view class="commentitem-header-line-item-title"> 会员手机号： </view>
          <view class="commentitem-header-line-item-content">
            {{ data.userId }}
            <uv-icon
              custom-prefix="custom-icon"
              labelColor="#ffffff"
              color="#F9934A"
              name="dianhuatianchong"
              size="18"
              v-if="data.userId"
              @click="callNumber(data.userId)"
            ></uv-icon>
          </view>
        </view>
        <view class="commentitem-header-line-item">
          <view class="commentitem-header-line-item-title"> 消费次数： </view>
          <view class="commentitem-header-line-item-content">
            {{ data.commentusercount }}
          </view>
        </view>
      </view>
    </view>

    <view user-select class="datacontext">
      <view v-for="v in data.tiancaicomment" :key="v" class="tiancai">
        <view class="tiancai-name">{{ v.name }}</view>
        <view v-if="v.allContent?.type === '10'" class="data-pictures">
          <uv-album
            :urls="v.allContent?.imgList?.map((c) => geturl(c.url)) || []"
            :multipleSize="'calc(30vw - 16rpx)'"
          ></uv-album>
        </view>
        <uv-rate
          readonly
          gutter="1"
          active-color="#FD754C"
          v-if="Number(v.star)"
          :count="5"
          :value="v.star"
        ></uv-rate>
        <view v-if="v.value">{{ v.value }}</view>
        <view>{{ v.remark }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { isNumber } from "lodash-es";
import { dicttype, tiancai } from "@/util/data";
import { useI18n } from "vue-i18n";
import { computed } from "vue";
import { geturl } from "@/util";
const $t = useI18n().t;
const p = withDefaults(
  defineProps<{
    data: Eps.BaseUserCommentEntity;
    clickcontent?: (e: Eps.BaseUserCommentEntity) => void;
    clickpoiName?: (e: Eps.BaseUserCommentEntity) => void;
    clickuserAvatar?: (e: Eps.BaseUserCommentEntity) => void;
    info?: boolean;
    feedbackset?: any;
  }>(),
  {
    clickcontent: () => {},
    clickpoiName: () => {},
    clickuserAvatar: () => {},
  }
);
function callNumber(phone: string) {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
}


</script>

<style scoped lang="scss">
.commentitem {
  background-color: #f2f4fa;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  align-items: center;
  justify-content: center;

  .commentitem-header {
    background-color: $uni-text-color-inverse;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 24px;
    padding-bottom: 24px;
    padding-top: 24px;
    .header {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      width: calc(100vw - 64rpx);
      background-color: rgba(242, 244, 250, 1);
      border-radius: 8px;
      padding-top: 12px;
      padding-bottom: 12px;
      .header-avatar {
        width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
      }
      .header_right {
        flex: 1;
        height: 46px;
        display: flex;
        align-items: center;
        flex-direction: column;
        .top {
          height: 43rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          font-weight: 600;
          width: 100%;
          .username {
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            display: flex;
            flex-wrap: wrap;

            .username_item {
              max-width: 320rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
            }
          }

          .vip {
            height: 43rpx;
            align-items: center;
            display: flex;
            justify-content: center;

            .view {
              align-items: center;
              display: flex;
              justify-content: center;
              width: 45rpx;
              height: 12px;
              background-color: #fd754c;
              margin-left: 12rpx;
              border-radius: 2px;
              font-size: 10px;
              color: #ffffff;
            }
          }

          .dianping {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12rpx;
          }
        }

        .dianping-type {
          font-size: 24rpx;
          text-align: center;
          display: flex;
          align-items: center;
          min-width: 80rpx;
          justify-content: center;
        }

        .top2 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;
          .username {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-size: 13px;
            gap: 12rpx;
          }
        }

        .top3 {
          font-size: 20rpx;
          color: #aaaaaa;
        }
      }
    }
    .commentitem-header-line {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      justify-items: center;
      align-content: center;
      width: calc(100vw - 64rpx);
      margin-left: 12px;
      .commentitem-header-line-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        align-items: center;
        font-size: 24rpx;
        width: calc(100vw - 180rpx);

        line-height: 18px;
        .commentitem-header-line-item-title {
          color: rgba(102, 102, 102, 1);
        }
        .commentitem-header-line-item-content {
          color: #000;
          font-weight: bold;
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
        }
      }
    }
  }
  .datacontext {
    width: calc(100vw - 120rpx);
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    justify-content: center;
    align-items: center;
  }

  .tiancai {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background-color: $uni-text-color-inverse;
    border-radius: 8px;
    gap: 12rpx;
    width: 100%;
    font-size: 13px;
    .tiancai-name {
      font-weight: bold;
      font-size: 14px;
    }
    .tiancai-title {
      font-size: 13px;
      color: rgba(170, 170, 170, 1);
    }
  }
}
</style>
